<template>
  <div class="setting-content" ref="settingContent">
    这里是设置的内容
    <div class="setting-icon" @click="setting">
      <el-icon>
        <component :is="setForm.isChangeSet ? 'Tools' : 'Close'"></component>
      </el-icon>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
const setForm = reactive({ isChangeSet: true });
const settingContent = ref<HTMLElement>();
const setting = () => {
  if (setForm.isChangeSet) {
    settingContent.value.style.right = "0px";
    setForm.isChangeSet = false;
  } else {
    settingContent.value.style.right = "-200px";
    setForm.isChangeSet = true;
  }
};
</script>

<style scoped lang="scss">
.setting-content {
  width: 200px;
  height: 100%;
  background-color: #fff;
  position: fixed;
  right: -200px;
  top: 0;
  .setting-icon {
    cursor: pointer;
    position: absolute;
    left: -48px;
    top: 30%;
    background-color: #1890ff;
    color: #fff;
    padding: 8px;
    border-radius: 5px 0 0 5px;
  }
}
</style>
